<template>
  <div class="app-container">
    <vue-element-loading :active="this.$store.state.elementloading.vueElementLoading" spinner="spinner" color="#FF6700"/>
    <el-card shadow="never">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchMap"
        style="margin-top: 20px;margin-left: 0px"
      >
        <el-form-item>
          <div style="width:240px">
            <el-input
              maxlength="50"
              @keyup.enter.native="searchBase"
              v-model.lazy="searchMap.bName"
              placeholder="请输入基地名称"
            >
              <template slot="prepend">基地名称</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:240px">
            <el-input
              maxlength="50"
              @keyup.enter.native="searchBase"
              v-model.lazy="searchMap.bInputLocation"
              placeholder="请输入基地地址"
            >
              <template slot="prepend">基地地址</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="select">
            <el-select v-model="searchMap.mName" clearable placeholder="请选择药材">
              <el-option
                v-for="(index, item) in mNameList"
                :key="index"
                :label="item[index]"
                :value="index"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width: 120px">
            <el-select
              @change="selectMedicinal"
              v-model="searchMap.bArea"
              clearable
              placeholder="基地面积"
            >
              <el-option
                v-for="option in baseArea"
                :key="option.type"
                :label="option.name"
                :value="option.value"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <div id="distpicker-warpper">
            <v-distpicker
              id="select-dis"
              :province="province"
              :city="city"
              :area="area"
              @selected="onSelected"
              @province="handleProvince"
              @city="handleCity"
              @area="handleArea"
            ></v-distpicker>
          </div>
        </el-form-item>
        <el-button @click="searchBase" icon="el-icon-search"></el-button>
      </el-form>

      <el-button-group style="margin-bottom:20px">
        <el-button v-if="btnshow('areamanage-add')" @click="openNew" size="small" type="primary" icon="el-icon-plus"></el-button>
        <el-button v-if="btnshow('areamanage-add')" @click="handleEdit(radio)" size="small" type="primary" icon="el-icon-edit"></el-button>
        <el-button
          v-if="btnshow('areamanage-delete')"
          @click="deleteProductBase(radio)"
          size="small"
          type="primary"
          icon="el-icon-delete"
        ></el-button>
      </el-button-group>

      <div style="width: 100%">
        <!-- 记录以下，wtf，宽度如果设置成100%，在切换页面是表格出现抖动的谜之现象
              解决方法：设置为99%
         -->
        <el-table
          v-if="list.length > 0 || list !== null || list.length !== null"
          :data="list"
          max-height="500"
          border
          style="width: 99%"
          @row-click="chooseone"
          highlight-current-row
          @current-change="handleSelectionChange"
        >
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.id">
                <span class="el-radio__label"></span>
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="bName" label="基地名称"></el-table-column>
          <el-table-column prop="bPosition" label="位置信息"></el-table-column>
          <el-table-column prop="bArea" label="基地面积(亩)" width="120px"></el-table-column>
          <el-table-column align="center" prop="environment" label="生态环境" width="150px">
            <template slot-scope="scope">
              <el-button @click="openenvironment(scope.row)" size="small" type="primary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="photosEdit" label="基地照片编辑" align="center" width="150">
            <template slot-scope="scope">
              <el-button v-if="btnshow('areamanage-addphoto')" @click="uploadphotos" size="small" type="primary">添加</el-button>
              <el-button @click="openbasephoto(scope.row)" size="small" type="danger">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="companies" label="所属公司" align="center">
            <template slot-scope="scope">
              <el-button @click="openCompany(scope.row)" size="small" type="primary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="gpsPosition" label="Gps位置" align="center">
            <template slot-scope="scope">
              <el-button @click="showgps(scope.row)" size="small" type="primary">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="medicinalNames" label="生产的药材"></el-table-column>
          <el-table-column align="center" prop="bRemarks" label="备注信息"></el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

      <!-- 编辑产地产区基地信息弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="handleDialogClose"
        v-dialogDrag
        :title="title"
        :visible.sync="editdataDialog"
        width="43%"
      >
        <add-new
          ref="feditForm"
          @fselect="fetchData"
          @close="closeDialog"
          @fopenChoosePositon="openChoosePositon"
          :isEdit="isEdit"
          :addnewData.sync="fpojo"
        ></add-new>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancleUpload">取 消</el-button>
          <el-button type="primary" @click="addData">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 选择位置弹窗 -->
      <el-dialog v-dialogDrag title="选择位置" :visible.sync="positionDialog" width="40%">
        <template>
          <div>
            <el-row type="flex">
              <el-col :span="12">
                <el-input style="margin-bottom: 10px" placeholder="请输入内容" v-model="position">
                  <template slot="prepend">地址</template>
                </el-input>
              </el-col>
              <!-- <el-col push="1" style="margin-top:12px" span="5">
              <span>经度：{{this.spojo.bLongitude}}</span>
            </el-col>
            <el-col push="2" style="margin-top:12px" span="5">
              <span>维度：{{this.spojo.bLatitude}}</span>
              </el-col>-->
            </el-row>
          </div>
          <baidu-map
            class="bm-view"
            :center="center"
            :zoom="zoom"
            :scroll-wheel-zoom="true"
            ak="IGv3m1D92jWLXobdMPUyfY5hCD5j34Oz"
            ref="chosePosition"
            @ready="mapReady"
            @click="getClickInfo"
          >
            <bm-local-search
              :keyword="position"
              :auto-viewport="true"
              :location="location"
              zoom="17"
            ></bm-local-search>
            <bm-scale></bm-scale>
          </baidu-map>
        </template>
        <span slot="footer" class="dialog-footer">
          <el-row type="flex">
            <span style="margin-top:12px">经度：</span>
            <el-col :span="5">
              <el-input v-model="center.lng"></el-input>
            </el-col>
            <span style="margin-top:12px;margin-left: 25px">维度：</span>
            <el-col :span="5">
              <el-input v-model="center.lat"></el-input>
            </el-col>
            <el-col :push="1" :span="2">
              <el-button @click="closeChoosePosition">取 消</el-button>
            </el-col>
            <el-col :push="3" :span="2">
              <el-button type="primary" @click="confirmPosition">确 定</el-button>
            </el-col>
          </el-row>
        </span>
      </el-dialog>

      <!-- 生态环境弹窗 -->
      <el-dialog v-dialogDrag style="font-family:'微软雅黑'" title="环境详情" :visible.sync="dialogEnviroForm">
        <environment-form :enviroformData="enviroform"></environment-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogEnviroForm = false">关 闭</el-button>
        </div>
      </el-dialog>

      <!-- 上传图片弹窗 -->
      <el-dialog title="添加图片" :visible.sync="dialogUploadPhoto" width="30%">
        <template>
          <el-upload
            ref="uploadImage"
            class="upload"
            drag
            :on-change="checkType"
            :auto-upload="false"
            :on-remove="handleRemove"
            accept="image/jpeg, image/jpg, image/png"
            action="none"
            :file-list="fileList"
            list-type="picture"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过1M</div>
          </el-upload>
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancleUploadImg">取 消</el-button>
          <el-button type="primary" @click="uploadImg">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 基地照片弹窗 -->
      <el-dialog
        v-dialogDrag
        title="基地照片"
        :before-close="imgsDialogClose"
        :visible.sync="dialogbaseArea"
        width="700px"
        :lock-scroll="true"
      >
        <template>
          <!--<el-carousel :interval="4000" type="card" height="500px">
          <el-carousel-item v-for="item in 15" :key="item">
            <el-image
              style="width: 500px;height: 400px"
              :src="`image/baseAreaPhoto/${item}.jpg`"
              :fit="fit"
            ></el-image>
          </el-carousel-item>
          </el-carousel>-->
          <el-row :guntter="0">
            <vue-element-loading
              :active="this.$store.state.elementloading.imgLoading"
              spinner="spinner"
              color="#FF6700"
            />
            <el-col :span="6" class="block" v-for="(img,index) in imgs" :key="index">
              <el-image
                style="width: 180px;height: 200px"
                :src="BASEURL + img.tImgId"
                :fit="fit"
              ></el-image>
            </el-col>
          </el-row>
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeImgs">关 闭</el-button>
        </div>
        <!-- <span slot="footer" class="dialog-footer"></span> -->
      </el-dialog>

      <!-- 所属公司弹窗 -->
      <el-dialog v-dialogDrag :lock-scroll="true" title="环境详情" :visible.sync="dialogCompanyForm">
        <company-form :companyformData="companyform"></company-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogCompanyForm = false">关 闭</el-button>
        </div>
      </el-dialog>

      <!-- gps弹窗 -->
      <el-dialog v-dialogDrag width="500px" title="Gps位置" :visible.sync="dialogFormGps">
        <template>
          <baidu-map
            class="bm-view"
            :center="center"
            :zoom="zoom"
            :scroll-wheel-zoom="true"
            ak="IGv3m1D92jWLXobdMPUyfY5hCD5j34Oz"
            ref="myMap"
            @ready="mapReady"
            @click="getClickInfo"
            @row-click="chooseone"
          >
            <bm-scale></bm-scale>
          </baidu-map>
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormGps = false">关 闭</el-button>
          <!-- <el-button type="primary" @click="addData('pojoForm')">确 定</el-button> -->
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script src="./areamanage.js"></script>
 
<style src="./areamanage.css" lang="css" scoped></style>

<style lang="css" >
.el-dialog {
  max-height: calc(100% - 200px);
  /* max-height: 600px; */
  display: flex;
  flex-direction: column;
}
.el-dialog__body {
  overflow: auto;
}
.upload {
  text-align: center;
}
</style>
